<template>
  <el-main v-loading="loading">
    <template v-if="listData.length > 0">
      <el-row :gutter="15">
        <el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in listData" :key="item.id">
          <el-card class="task task-item" shadow="hover">
            <h2>{{ item.title }}</h2>
            <ul>
              <li>
                <h4>执行类</h4>
                <p>{{ item.handler }}</p>
              </li>
              <li>
                <h4>定时规则</h4>
                <p>{{ item.cron }}</p>
              </li>
            </ul>
            <div class="bottom">
              <div class="state">
                <el-tag v-if="item.state == '1'" size="small">准备就绪</el-tag>
                <el-tag v-if="item.state == '-1'" size="small" type="info">停用</el-tag>
              </div>
              <div class="handler">
                <el-popconfirm title="确定立即执行吗？" @confirm="run(item)">
                  <template #reference>
                    <el-button type="primary" icon="el-icon-caret-right" circle></el-button>
                  </template>
                </el-popconfirm>
                <el-dropdown trigger="click">
                  <el-button type="primary" icon="el-icon-more" circle plain></el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="edit(item)">编辑</el-dropdown-item>
                      <el-dropdown-item @click="logs(item)">日志</el-dropdown-item>
                      <el-dropdown-item @click="del(item)" divided>删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </template>

    <template v-else>
      <el-empty :description="emptyText" :image-size="100" :style="{ height: '100%' }"></el-empty>
    </template>
  </el-main>

  <el-footer class="jd-list-page" v-if="!hidePagination || !hideDo" :style="{height: '51px'}">
    <div class="jd-list-pagination">
      <el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="jdPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
    </div>
    <div class="jd-list-do" v-if="!hideDo">
      <el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left: 15px"></el-button>
    </div>
  </el-footer>
</template>

<script>
import config from "@/config/table"

export default {
  name: "cardList",
  props: {
    apiObj: { type: Object, default: () => {} },
    params: { type: Object, default: () => {} },
    data: { type: Object, default: () => {} },
    pageSize: { type: Number, default: config.pageSize },
    pageSizes: { type: Array, default: config.pageSizes },
    hidePagination: { type: Boolean, default: false },
    hideDo: { type: Boolean, default: false },
    hideRefresh: { type: Boolean, default: false },
    paginationLayout: { type: String, default: config.paginationLayout }
  },
  watch: {
    data() {
      this.listData = this.data
      this.total = this.listData.length
    },
    apiObj: {
      handler() {
        this.listParams = this.params
        this.refresh()
      },
      deep: true
    },
    params: {
      handler() {
        this.listParams = this.params
        this.refresh()
      },
      deep: true
    }
  },
  data() {
    return {
      jdPageSize: this.pageSize,
      emptyText: "暂无数据",
      // listData: [],
      listData: [
        {
          id: "1",
          title: "清理服务器缓存",
          handler: "cleanUpCacheHandler",
          cron: "59 59 23 * * ? *",
          state: "1"
        },
        {
          id: "2",
          title: "自动审核",
          handler: "automaticAuditHandler",
          cron: "0 0 * * * ? *",
          state: "1"
        },
        {
          id: "3",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "4",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "5",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "6",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "7",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "8",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "9",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "10",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "11",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "12",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "13",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "14",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "15",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        },
        {
          id: "16",
          title: "清理未实名用户",
          handler: "deleteUserHandler",
          cron: "0 0 0 * * ? *",
          state: "-1"
        }
      ],
      total: 0,
      currentPage: 1,
      loading: false,
      listParams: this.params
    }
  },
  mounted() {
    try {
      this.getData()
    } catch (error) {
      console.log(error)
    }
  },
  methods: {
    edit(item) {
      this.$emit("edit", item)
    },
    logs(item) {
      this.$emit("logs", item)
    },
    del(item) {
      this.$emit("del", item)
    },
    run(item) {
      this.$emit("run", item)
    },
    async getData() {
      this.loading = true
      var reqData = {
        pageNum: this.currentPage,
        pageSize: this.jdPageSize
      }
      if (this.hidePagination) {
        delete reqData.pageNum
        delete reqData.pageSize
      }
      Object.assign(reqData, this.listParams)

      let res

      try {
        res = await this.apiObj.get(reqData)
      } catch (error) {
        this.loading = false
        this.emptyText = error.statusText
        return false
      }

      if (res.code != 200) {
        this.loading = false
        this.emptyText = res.msg
      } else {
        this.emptyText = "暂无数据"
        if (this.hidePagination) {
          this.listData = res.data || []
        } else {
          this.listData = res.rows || []
        }
        this.total = res.total || 0
        this.loading = false
      }

      this.$emit("dataChange", res, this.listData)
    },
    // 分页点击
    paginationChange() {
      this.getData()
    },
    // 条数变化
    pageSizeChange(size) {
      this.jdPageSize = size
      this.getData()
    },
    // 刷新数据
    refresh() {
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.task {
  height: 210px;
}
.task-item h2 {
  font-size: 15px;
  color: #3c4a54;
  padding-bottom: 15px;
}
.task-item li {
  list-style-type: none;
  margin-bottom: 10px;
}
.task-item li h4 {
  font-size: 12px;
  font-weight: normal;
  color: #999;
}
.task-item li p {
  margin-top: 5px;
}
.task-item .bottom {
  border-top: 1px solid #ebeef5;
  text-align: right;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.jd-list-page {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .jd-list-do {
    white-space: nowrap;
  }
}
</style>
